<div [formGroup]="form">
    @switch (field.properties.fieldType) {
        @case ("Number") {
            @switch (field.rawProperties.editor) {
                @case ("Input") {
                    <input class="form-control" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" type="number" />
                }

                @case ("Stars") {
                    <sqx-stars [formControlName]="field.name" [maximumStars]="field.rawProperties.maxValue" />
                }

                @case ("Dropdown") {
                    <select class="form-select" [formControlName]="field.name">
                        <option [ngValue]="null"></option>

                        @for (value of field.rawProperties.allowedValues; track value) {
                            <option [ngValue]="value">{{ value }}</option>
                        }
                    </select>
                }
            }
        }

        @case ("String") {
            @switch (field.rawProperties.editor) {
                @case ("Input") {
                    <input class="form-control" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" />
                }

                @case ("Slug") {
                    <input class="form-control" [formControlName]="field.name" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
                }

                @case ("Dropdown") {
                    <select class="form-select" [formControlName]="field.name">
                        <option [ngValue]="null"></option>

                        @for (value of field.rawProperties.allowedValues; track value) {
                            <option [ngValue]="value">{{ value }}</option>
                        }
                    </select>
                }
            }
        }

        @case ("Boolean") {
            @switch (field.rawProperties.editor) {
                @case ("Toggle") {
                    <sqx-toggle [formControlName]="field.name" [threeStates]="!field.properties.isRequired" />
                }

                @case ("Checkbox") {
                    <div class="form-check">
                        <input class="form-check-input" id="{{ uniqueId }}" [formControlName]="field.name" sqxIndeterminateValue type="checkbox" />
                        <label class="form-check-label" for="{{ uniqueId }}"></label>
                    </div>
                }
            }
        }
    }
</div>
